<template>
  <div class="groupManage-container">
    <el-card shadow="never">
      <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
      <ZwTable ref="tableRef" class="table-box" :option="tableOption" :rowKey="getRowKey" :fetch-params="state.searchParams" :fetch-api="fetchApi()"></ZwTable>
      <!-- 创建人弹框 -->
      <ZWDepart ref="ZWDepartRef" @submit="getDepart" :type="1" />
      <!-- 分页 -->
    </el-card>
  </div>
</template>

<script lang="tsx" setup>
  import { reactive, ref, onMounted, nextTick, computed } from 'vue'
  import { ElLoading, ElMessage, ElAvatar } from 'element-plus'
  import ZWDepart from '@/components/ZWDepart.vue'
  import { massRecord, syncGroupManage } from '@/api/groupManageList'
  import { useStore } from '@/store'
  import { getSetionId, DFormat, IsNotEmpty } from '@/utils/utils'
  import router from '@/router'
  import ZwSearchForm from '@/components/zw/search-form/SearchForm'
  import ZwTable from '@/components/zw/table/Table'
  import { deepCopy } from '@/utils/helper'

  const props = defineProps(['pull_id'])
  const formRef = ref(null)
  // 创建人options
  const ZWDepartRef = ref(null)
  const PaginationRef = ref({})
  const store = useStore()
  const tableData = ref([])
  const creators = ref([])
  let formInline = ref({
    pull_id: '',
    keyword: '',
    work_user_list: [],
    deliver_status: -1,
    join_status: -1,
    page: 1,
    page_size: 15
  })
  formInline.value.pull_id = props.pull_id

  const searchOption = computed(() => {
    return [
      {
        label: '搜索客户',
        name: 'keyword',
        value: '',
        type: 'input',
        width: '280px',
        placeholder: '请输入要搜索的客户'
      },
      {
        label: '所属成员',
        name: 'work_user_list',
        value: [],
        type: 'select',
        placeholder: '选择成员',
        multiple: true,
        popperClass: 'zw-hide_select_option',
        isUserSelect: true,
        formatOption: (v) => ({
          label: v.name,
          value: v.id
        })
      },
      {
        label: '送达状态',
        name: 'deliver_status',
        value: '',
        type: 'select',
        placeholder: '请选择送达状态',
        fetchOptionApi: () => {
          return new Promise((resolve) => {
            resolve([
              { name: '全部', id: '-1' },
              { name: '未收到邀请', id: '0' },
              { name: '已收到邀请', id: '1' },
              { name: '客户已不是好友', id: '2' },
              { name: '未知原因导致失败', id: '3' }
            ])
          })
        },
        formatOption: (v: { name: any; id: any }) => ({
          label: v.name,
          value: v.id
        })
      },
      {
        label: '是否入群',
        name: 'join_status',
        value: '',
        type: 'select',
        placeholder: '请选择是否入群',
        fetchOptionApi: () => {
          return new Promise((resolve) => {
            resolve([
              { name: '全部', id: -1 },
              { name: '未入群', id: '0' },
              { name: '已入群', id: 1 }
            ])
          })
        },
        formatOption: (v: { name: any; id: any }) => ({
          label: v.name,
          value: v.id
        })
      }
    ]
  })
  const tableOption = [
    {
      prop: 'cust_avatar',
      label: '客户',
      width: 200,
      render({ row }) {
        return (
          <div style="display: flex; align-items: center">
            <ElAvatar shape="square" size={36} src={row?.cust?.cust_baseinfo.avatar} />
            <span>{row?.cust?.cust_baseinfo.name || '--'}</span>
          </div>
        )
      }
    },
    {
      prop: 'manager',
      label: '所属成员',
      width: 140,
      render({ row }) {
        return (
          <div>
            {row.cust?.distribution_work_user.name || '--'}
          </div>
        )
      }
    },
    {
      prop: 'members_num',
      label: '送达状态',
      width: 120,
      render({ row }) {
        return (
          <div>
            {row?.deliver_status_name || '--'}
          </div>
        )
      }
    },
    {
      prop: 'staff_list',
      label: '邀请群聊',
      width: 200,
      render({ row }) {
        return (
          <div>
            {
              row.groupchat.map((item:any) => {
                return (
                  <div class="gorup-box">
                    <img src={item.avatar} alt="" />
                    <span >{ item.name }</span> 
                  </div>
                )
              })
            }
          </div>
         
        )
      }
    },
    {
      prop: 'work_wx_members_num',
      label: '是否入群',
      render({ row }) {
        return (
          <div>
            {row.join_status_name || '--'}
          </div>
        )
      }
    }
  ]

  const getRowKey = (row: any) => {
    return row.id
  }

  const defaultParams = reactive({
    pull_id: props.pull_id,
    keyword: '',
    work_user_list: [],
    deliver_status: -1,
    join_status: -1
  })
  const state = reactive({
    searchParams: deepCopy({ ...defaultParams, pull_id: props.pull_id })
  })
  const search = (data: any) => {
    const res = {...state.searchParams, ...data}
    state.searchParams = res
  }
  const reset = (v?: any) => {
    const res = {...state.searchParams, ...v}
    state.searchParams = res
  }
  const fetchApi = () => {
    // 获取文件列表
    // getTableH()
    return massRecord
  }

  // 查询列表数据
  const fetch = () => {
    massRecord(formInline.value).then((res: any) => {
      tableData.value = res.data
      store.dispatch('pageTotal', res.total)
    })
  }
  nextTick(() => {
    fetch()
  })

  //打开新建选择人
  const openDepart = () => {
    ZWDepartRef.value.departVisble = true
    ZWDepartRef.value.selectedMember = creators.value
  }
  const changeDepart = (data: any) => {
    let removeDepart = creators.value.find((item: any) => !data.includes(item.id))
    let arr: any[] = creators.value.filter((item: any) => data.includes(item.id))
    formInline.value.work_user_list = getSetionId('id', arr)
    creators.value = arr
    ZWDepartRef.value.removeItem(removeDepart)
  }
  const getDepart = (res: any) => {
    creators.value = res
    formInline.value.work_user_list = getSetionId('id', creators.value)
    console.log(formInline.value.work_user_list, 555)
  }

  const initFormData = () => {
    formInline.value = {
      pull_id: '',
      keyword: '',
      work_user_list: [],
      deliver_status: -1,
      join_status: -1,
      page: 1,
      page_size: 15
    }
    creators.value = []
    ZWDepartRef.value.removeItem(creators.value)
    formInline.value.pull_id = props.pull_id
    PaginationRef.value.initPage = true
    fetch()
  }

  // 清空
  const onReset = () => {
    formRef.value?.resetFields()
    initFormData()
  }

  // 分页信息
  const page = (val: any) => {
    formInline.value.page = val.page
    formInline.value.page_size = val.page_size || formInline.value.page_size
    fetch()
  }
  // 搜索查询
  const onSubmit = () => {
    PaginationRef.value.initPage = true
    formInline.value.page = 1
    formInline.value.page_size = 15
    fetch()
  }
</script>

<style scoped lang="scss">
  .formBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #f9f9f9;
    padding: 16px 16px 0;
    margin-bottom: 12px;
    .el-form-item {
      margin-right: 0;
    }

    .btn-box {
      flex: 1;
      text-align: right;
    }
  }
  .gc-header {
    margin-bottom: 20px;
    background-color: #f9f9f9;
  }
  .el-input {
    width: 217px;
  }

  .btn-wrap {
    display: flex;
  }

  .zw_table {
    margin: 0;
  }
  :deep(.gorup-box) {
    background: #ffffff;
    border-radius: 2px;
    border: 1px solid #eaeaea;
    padding: 6px;
    height: 36px;
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #33302d;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
      vertical-align: middle;
    }
    span {
      margin-right: 5px;
      vertical-align: middle;
    }
  }
</style>
